<template>
	<view class="container">
		<!-- 有封面图片 -->
		<view class="cover" v-if="LoginUser.cover" :style="{background:'url('+LoginUser.cover+')'}">
			<view class="avatar">
				<!-- #ifdef MP-WEIXIN -->
				<open-data type="userAvatarUrl"></open-data>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
				<!-- #endif -->
			</view>
		</view>
		<!-- 无封面图片 -->
		<view class="cover" v-else>
			<view class="avatar">
				<!-- #ifdef MP-WEIXIN -->
				<open-data type="userAvatarUrl"></open-data>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
				<!-- #endif -->
			</view>
		</view>

		<!-- 表单元素 -->
		<view class="profile">
			<u--form :model="LoginUser" labelPosition="left" ref="profile" :errorType="errorType" :rules="rules">

				<!-- 昵称 -->
				<u-form-item label="昵称" prop="nickname">
					<u--input v-model="LoginUser.nickname" placeholder="请输入昵称" border="none"></u--input>
				</u-form-item>

				<!-- 性别 -->
				<u-form-item label="性别" @click="SexShow = true">
					<u--input v-model="LoginUser.sex_text" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right">
					</u-icon>
				</u-form-item>

				<!-- 地区-->
				<u-form-item label="地区" @click="RegionShow = true">
					<pick-regions :defaultRegion="LoginUser.region" @getRegion="handleGetRegion">
						<u--input v-model="LoginUser.region_text" disabled disabledColor="#ffffff" placeholder="请选择地区"
							border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right">
						</u-icon>
					</pick-regions>
				</u-form-item>

				<!-- 邮箱 -->
				<u-form-item label="邮箱" prop="email">
					<u--input v-model="LoginUser.email" border="none" disabled></u--input>
				</u-form-item>

				<!-- 简介 -->
				<u-form-item label="简介">
					<u--textarea v-model="LoginUser.content" placeholder="请输入简介" count></u--textarea>
				</u-form-item>

				<!-- 封面 -->
				<u-form-item label="封面">
					<u-upload ref="cover" :fileList="cover" @afterRead="CoverUpload" @delete="CoverDel" name="cover"
						:maxCount="1"></u-upload>
				</u-form-item>

				<view>
					<u-button @click="submit" type="primary">修改资料</u-button>
				</view>
			</u--form>
		</view>

		<!-- 性别的选择器 @confirm:// 回调参数为包含columnIndex、value、values-->
		<u-picker :show="SexShow" :columns="SexList" keyName="label" @confirm="SexChange" @cancel="SexShow = false">
		</u-picker>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	//引入第三方的地区插件
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				LoginUser: null,
				errorType: ['toast'],
				rules: {

				},
				SexShow: false,
				RegionShow: false,
				SexList: [
					[{
							label: '男',
							id: '1',
						},
						{
							label: '女',
							id: '2'
						},
						{
							label: '保密',
							id: '0'
						}
					]
				],
				cover: [],
				RegionCode: []
			}
		},
		onShow() {
			//验证是否有登陆
			this.$u.auth.check()
			this.LoginUser = uni.getStorageSync('LoginUser')
			if (this.LoginUser.cover) {
				this.cover = [{
					url: this.LoginUser.cover
				}]
			}
		},
		methods: {
			SexChange(val) {
				this.SexShow = false
				this.LoginUser.sex_text = val.value[0].label
				this.LoginUser.sex = val.value[0].id
			},
			// 切换地区
			handleGetRegion(val) {
				let [province, city, district] = val
				let region = []
				let region_text = ''
				if (province) {
					region.push(province.name)
					this.LoginUser.province = province.code
					region_text += province.name + "-"
				}
				if (city) {
					region.push(city.name)
					this.LoginUser.city = city.code
					region_text += city.name + "-"
				}
				if (district) {
					region.push(district.name)
					this.LoginUser.district = district.code
					region_text += district.name
				}
				this.LoginUser.region = region
				this.LoginUser.region_text = region_text
			},
			// 删除图片
			CoverDel() {
				this.cover = []
				// console.log(this.cover)
			},
			// 图片上传
			CoverUpload(event) {
				this.$refs.cover.lists.push(event.file)
				this.cover = []
				this.cover.push(event.file)
			},
			async submit() {
				//表单验证是否通过
				let data = {
					id: this.LoginUser.id,
					nickname: this.LoginUser.nickname,
					sex: this.LoginUser.sex,
					content: this.LoginUser.content,
					region: this.LoginUser.district
				}
				var thumb = this.$refs.cover.lists[0].thumb ? this.$refs.cover.lists[0].thumb : ''
				if (thumb) {
					let res = {
						filePath: thumb,
						name: 'cover',
						header: {},
						formData: data
					}
					console.log(res)
					var result = await this.$u.api.user.profile(res)
				} else {
					console.log(data)
					var result = await this.$u.api.user.profile(data)
				}

				if (result.code == '1') {
					//重新覆盖一份缓存
					uni.setStorageSync('LoginUser', result.data)
					//提醒，返回上一个界面
					this.$refs.uToast.show({
						message: result.msg,
						type: 'success',
						complete: () => {
							uni.$u.route({
								type: 'navigateBack',
								delta: 1
							})
						}
					})
				} else {
					//提醒，返回上一个界面
					this.$refs.uToast.show({
						message: result.msg,
						type: 'error',
					})
					return false
				}
			}
		}
	}
</script>
<style>
	.cover {
		width: 100%;
		background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
		position: relative;
		padding: 5vh 0vh;
		text-align: center;
		z-index: 0;
	}

	.nickname {
		color: #fff;
	}

	.avatar {
		width: 12vh;
		height: 12vh;
		margin: 0 auto;
		border-radius: 100px;
		overflow: hidden;
		margin-bottom: 3vh;
	}

	.profile {
		margin-top: 3vh;
		background: #fff;
		padding: 0vh 2vh;
		text-align: left;
	}
</style>